<template>
    <div class="sidebar">
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            background-color="#324157"
            text-color="#bfcbd9"
            active-text-color="#20a0ff"
            unique-opened
            router
        >
<!--          v-if="user.isSadmin"-->
          <template >
              <template v-for="item in items" >
                  <el-menu-item :index="item.index" :key="item.index" @click='LogOut(item.index)'>
                      <i :class="item.icon" class='menu-item-icon'></i>&nbsp;
                      <span slot="title" class='menu-item-text'>{{ item.title }}</span>
                  </el-menu-item>
              </template>
          </template>
<!--          <template v-else>-->
<!--              <template v-for="item in itemss" >-->
<!--                  <el-menu-item :index="item.index" :key="item.index" @click='LogOut(item.index)'>-->
<!--                      <i :class="item.icon" class='menu-item-icon'></i>&nbsp;-->
<!--                      <span slot="title" class='menu-item-text'>{{ item.title }}</span>-->
<!--                  </el-menu-item>-->
<!--              </template>-->
<!--          </template>-->
        </el-menu>
    </div>
</template>

<script>
import bus from '../common/bus';
export default {
    data() {
        return {
            collapse: false,
			user: [],
            items: [
                {
                    icon: 'el-icon-s-home',
                    index: 'dashboard',
                    title: '系统首页'
                },
                {
                    icon: 'el-icon-s-custom',
                    index: 'userTable',
                    title: '用户表格'
                },
                {
                    icon: 'el-icon-s-goods',
                    index: 'productTable',
                    title: '商品表格'
                },

                {
                    icon: 'el-icon-s-order',
                    index: 'orderTable',
                    title: '订单管理'
                },
                {
                    icon: 'el-icon-back',
                    index: 'logOut',
                    title: '退出登录'
                }
            ],
			itemss: [
			    {
			        icon: 'el-icon-s-home',
			        index: 'dashboard',
			        title: '系统首页'
			    },
                {
                    icon: 'el-icon-s-custom',
                    index: 'userTable',
                    title: '用户表格'
                },
                {
                    icon: 'el-icon-s-goods',
                    index: 'productTable',
                    title: '商品表格'
                },
                {
                    icon: 'el-icon-s-order',
                    index: 'orderTable',
                    title: '订单管理'
                },
                {
                    icon: 'el-icon-back',
                    index: 'logOut',
                    title: '退出登录'
                }
			]
        };
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
    },
    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
		this.user = JSON.parse(sessionStorage.getItem('ms_username'));
    },
    methods: {
        LogOut(index) {
            if (index === 'logOut') {
                sessionStorage.removeItem('ms_username');
                this.$router.push('/login');
            }
        }
    }
};
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 200px;
}
.sidebar > ul {
    height: 100%;
}
.menu-item-icon {
    font-size: 20px
}
.menu-item-text {
    font-size: 16px;
}
</style>
